<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="24">
        <SearchForm v-show="showSearch" v-model="queryParams" :options="options.formOps" @onQuery="getList">
        </SearchForm>
        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <!-- <el-button type="primary" plain icon="Plus" @click="handleAdd">新增</el-button> -->
          </el-col>

          <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
        </el-row>
        <Table ref="table" :auto-featch="true" :fetch-data="fetchData" :options="options.table" :useAction="false">
          <!-- <template #actionButton="{ row }">
            <el-button type="text" icon="Edit" @click="handleEdit(row)"
              >修改</el-button
            >

            <el-button
              type="text"
              icon="Delete"
              style="color: red"
              @click="handleDel(row)"
              >删除</el-button
            >
          </template> -->
        </Table>
        <DialogVform :formJson="formJson" ref="dialogVform" @onSubmit="onSubmit">
        </DialogVform>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import Table from "@/components/Table/index.vue";
import SearchForm from "@/components/searchForm/index";
import DialogVform from "@/components/dialogVform/index";
import formJson from "./components/options.json";
import { apis as APIS } from "@/api/hdwarning/ssjkjc";
import { useAsyncData, useFormJsonNew } from "@/views/hooks/useAsyncData.js";
const { proxy } = getCurrentInstance();
const ops = useFormJsonNew(formJson, {
  sort: [],
  sortable: [],
});
const options = reactive({
  table: ops,
  formOps: ops.filter((i) =>
    ["deviceName", "indexName", "databaseBitNumber", "type"].includes(i.prop)
  ),
});
const showSearch = ref(true);
const dialogVform = ref();
const table = ref();

const plugEdit = (node) => {
  form.value.deptId = node.deptId || "";
  form.value.deptName = node.deptName || "";
  form.value.planId = node.planId || "";
  form.value.planName = node.planName || "";
};
const plugAdd = () => {
  form.value.deptId = "";
  form.value.deptName = "";
};
const {
  onSubmit,
  fetchData,
  dialogType,
  handleAdd,
  handleEdit,
  getList,
  handleDel,
  queryParams,
  form,
} = useAsyncData({
  APIS,
  formJson,
  dialogVform,
  table,
  proxy,
  plugEdit,
  plugAdd,
});
const deptTree = ref([]);
onMounted(() => { });
</script>

<style lang="scss" scoped>
::v-deep.el-form-item__label {
  text-align: right !important;
}
</style>
